<template>
  <div class="side-navigation">
    <el-menu
      :default-active="activeMenu"
      class="nav-menu"
      :collapse="isCollapse"
      @select="handleMenuSelect"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409eff"
    >
      <!-- 仪表板 -->
      <el-menu-item index="/dashboard">
        <el-icon><DataBoard /></el-icon>
        <template #title>仪表板</template>
      </el-menu-item>

      <!-- 题目相关 -->
      <el-sub-menu index="problems">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>题目管理</span>
        </template>
        <el-menu-item index="/problems">题目列表</el-menu-item>
      </el-sub-menu>

      <!-- 作业相关 -->
      <el-sub-menu index="assignments">
        <template #title>
          <el-icon><Collection /></el-icon>
          <span>{{ isStudent ? '我的作业' : '作业管理' }}</span>
        </template>
        <el-menu-item v-if="isStudent" index="/homeworks">我的作业</el-menu-item>
        <el-menu-item v-if="isTeacher || isAdmin" index="/homeworks">作业管理</el-menu-item>
      </el-sub-menu>

      <!-- 课程相关 -->
      <el-sub-menu index="courses">
        <template #title>
          <el-icon><Reading /></el-icon>
          <span>{{ isStudent ? '我的课程' : (isTeacher ? '我的课程' : '课程管理') }}</span>
        </template>
        <el-menu-item index="/courses">{{ isStudent ? '我的课程' : (isTeacher ? '我的课程' : '课程管理') }}</el-menu-item>
      </el-sub-menu>

      <!-- 班级相关 -->
      <el-sub-menu index="classes">
        <template #title>
          <el-icon><School /></el-icon>
          <span>{{ isStudent ? '我的班级' : '班级管理' }}</span>
        </template>
        <el-menu-item :index="isStudent ? '/student-class' : '/classes'">班级列表</el-menu-item>
      </el-sub-menu>

      <!-- 提交记录 -->
      <el-menu-item index="/submissions">
        <el-icon><Upload /></el-icon>
        <template #title>{{ isStudent ? '我的提交' : '提交记录' }}</template>
      </el-menu-item>

      <!-- 用户管理 -->
      <el-sub-menu v-if="isTeacher || isAdmin" index="users">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item v-if="isTeacher" index="/student-management">学生管理</el-menu-item>
        <el-menu-item v-if="isAdmin" index="/teacher-management">教师管理</el-menu-item>
      </el-sub-menu>

      <!-- 系统管理 -->
      <el-sub-menu v-if="isAdmin" index="system">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/admin">系统设置</el-menu-item>
        <el-menu-item index="/system-logs">系统日志</el-menu-item>
      </el-sub-menu>

      <!-- AI助手 -->
      <el-sub-menu index="ai">
        <template #title>
          <el-icon><ChatDotRound /></el-icon>
          <span>AI助手</span>
        </template>
        <el-menu-item index="/ai-assistant">智能对话</el-menu-item>
        <el-menu-item v-if="isTeacher || isAdmin" index="/ai-problem-generator">AI智能出题</el-menu-item>
        <el-menu-item index="/async-judge-demo">异步判题演示</el-menu-item>
      </el-sub-menu>

      <!-- 个人资料 -->
      <el-menu-item index="/profile">
        <el-icon><UserFilled /></el-icon>
        <template #title>个人资料</template>
      </el-menu-item>
    </el-menu>

    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="toggleCollapse">
      <el-icon>
        <component :is="isCollapse ? 'Expand' : 'Fold'" />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import {
  DataBoard,
  Document,
  Collection,
  Reading,
  School,
  Upload,
  User,
  UserFilled,
  Setting,
  ChatDotRound,
  Expand,
  Fold
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const isCollapse = ref(false)

// 定义事件
const emit = defineEmits<{
  'toggle-collapse': [collapsed: boolean]
}>()

// 计算当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})

// 计算用户角色
const isStudent = computed(() => authStore.hasRole('student'))
const isTeacher = computed(() => authStore.hasRole('teacher'))
const isAdmin = computed(() => authStore.hasRole('admin'))

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  router.push(index)
}

// 切换折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
  emit('toggle-collapse', isCollapse.value)
}

// 监听折叠状态变化
watch(isCollapse, (newValue) => {
  emit('toggle-collapse', newValue)
})
</script>

<style scoped>
.side-navigation {
  position: relative;
  height: 100%;
  background-color: #304156;
}

.nav-menu {
  height: 100%;
  border-right: none;
}

.nav-menu:not(.el-menu--collapse) {
  width: 200px;
}

.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}

.collapse-btn:hover {
  background-color: #66b1ff;
  transform: translateX(-50%) scale(1.1);
}

/* 菜单项样式优化 */
:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item:hover) {
  background-color: #263445 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #409eff !important;
  color: white !important;
}

/* 收起状态下不显示高亮背景 */
:deep(.el-menu--collapse .el-menu-item.is-active) {
  background-color: transparent !important;
  color: #409eff !important;
}

:deep(.el-sub-menu__title:hover) {
  background-color: #263445 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-menu:not(.el-menu--collapse) {
    width: 180px;
  }
}
</style>
